<!--  -->
<template>
  <div class="customer-container">
    <chart-title title="开发客户统计" />
    <div
      class="chart-container"
      style="width:100%;height:100%;min-height:200px;padding:20px 20px 0px;box-sizing:border-box;"
    >
      <div class="filter-container">
        <el-select
          v-model="time"
          size="mini"
          style="width:100px;"
        >
          <el-option
            v-for="(item,index) in timeOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div
        id="customerChart"
        style="width:100%;height:100%;min-height:200px;"
      />
    </div>
  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from 'vue'
// echarts
import * as echarts from 'echarts'
import ChartTitle from './chartTitle.vue'

export default {
  components: {
    ChartTitle,
  },
  setup(props, context) {
    var reactiveData = reactive({
      time: 1,
      timeOption: [
        { label: '近7天', value: 1 },
        { label: '近30天', value: 2 },
        { label: '近6个月', value: 3 },
      ],
      option: {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          left: 20, // 如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
          data: ['新注册', '待进货', '正常交易'],
        },
        color: ['#6386eb', '#ffb96c', '#72d0ad'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        // x轴样式
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#A2C9AF',
              width: 1,
              type: 'solid',
            },
          },
          axisLabel: {
            textStyle: {
              color: function(value, index) {
                return '#666'
              },
            },
          },
          data: ['01/18', '01/19', '01/20', '01/21', '01/22', '01/23', '01/24'],
        },
        // y轴样式
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#A2C9AF',
              width: 1,
              type: 'solid',
            },
          },
          axisLabel: {
            textStyle: {
              color: function(value, index) {
                return '#666'
              },
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#F0F0F0'],
              width: 1,
              type: 'dashed',
            },
          },
        },
        series: [
          {
            name: '新注册',
            type: 'line',
            stack: 'Total',
            data: [400, 232, 400, 154, 800, 330, 410],
          },
          {
            name: '待进货',
            type: 'line',
            stack: 'Total',
            data: [400, 932, 605, 934, 1290, 1330, 1320],
          },
          {
            name: '正常交易',
            type: 'line',
            stack: 'Total',
            data: [200, 600, 800, 934, 1290, 400, 500],
          },
        ],
      },
    })
    onMounted(() => {
      var chartDom = document.getElementById('customerChart')
      chartDom.removeAttribute('_echarts_instance_')
      var myChart = echarts.init(chartDom)
      // 绘制图表
      myChart.setOption(reactiveData.option)
      window.onresize = function() {
        // 自适应大小
        myChart.resize()
      }
    })
    return {
      ...toRefs(reactiveData),
    }
  },
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.customer-container {
  width: 100%;
  height: 100%;
  padding: 20px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .chart-container {
    position: relative;
    .filter-container {
      position: absolute;
      right: 20px;
      top: -4px;
      z-index: 6666;
    }
  }
}
</style>
